import React, {useState} from 'react';
import classes from './index.module.scss'
import {Menu} from "antd";
import {useDispatch, useSelector} from "react-redux";
import {updateArticleList} from "../../../store/frontDesk/articleSlice";
import {reqArticleIntro} from "../../../api/frontDesk/frontDeskApi";

//分类的名称
const sortItems = [
    {
        label: '综合',
        key: '综合',
    },
    {
        label: '后端',
        key: '后端',
    },
    {
        label: '前端',
        key: '前端',
    },
    {
        label: 'Android',
        key: 'Android',
    },
    {
        label: 'IOS',
        key: 'IOS',
    },
    {
        label: '人工智能',
        key: '人工智能',
    },
    {
        label: '开发工具',
        key: '开发工具',
    },
    {
        label: '代码人生',
        key: '代码人生',
    },
    {
        label: '阅读',
        key: '阅读',
    },

];


const Sort = () => {
    const [current, setCurrent] = useState('综合');
    const dispatch = useDispatch()

    //分类的点击事件
    const onClick = async (e) => {
        const data = await reqArticleIntro()
        const {articleList} = data
        const newList = articleList.filter((item) => {
            if (e.key === '综合') {
                return articleList
            }
            return item.sort.indexOf(e.key) !== -1
        })
        dispatch(updateArticleList(newList))
        setCurrent(e.key);
    }


    return (
        <div className={classes.Sort}>
            <div className={classes.SortListContainer}>
                <Menu
                    style={{backgroundColor: "rgba(255,255,255,0.01)"}}
                    onClick={onClick}
                    selectedKeys={[current]}
                    mode="horizontal"
                    items={sortItems}/>
            </div>
        </div>
    );
};


export default Sort;